import React, { Component } from 'react'
import Mytab from '../root/Mytab'
import pxPage from '../../root/pxPage'
import { ImagePicker, List, InputItem } from 'antd-mobile';
import { getMsg, addsp_temp, errToast, modifybus,qutebus } from '../../redux/actionCreator'
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'
const deviceHight = document.documentElement.clientHeight
const addspdiv = {
    width: '100%',
    height: `${deviceHight - 30}px`,
    paddingTop: pxPage(15),
    borderTop: '1px solid #fff'
}
const addspdivdiv = {
    width: pxPage(338),
    height: `${deviceHight - 120}px`,
    backgroundColor: 'rgb(212, 118, 102)'
}
const addspdivdivtwo = {
    width: '100%',
    height: pxPage(100),
    position: 'relative',
    backgroundColor: 'black'
}
const addspdivdivtwoi = {
    position: 'absolute',
    left: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}
const addspdivdivtwoii = {
    position: 'absolute',
    right: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}
// 输入框样式
const addspinputone = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(155),
}
const addspinputtwo = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(195),
}
const addspinputthree = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(235),
}
const addspinputfour = {
    width: pxPage(80),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(275),
}
const addspinputfourhalf = {
    width: pxPage(80),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(110),
    top: pxPage(275),
}
const addspinputfive = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(315),
}
const addspimg = {
    width: pxPage(140),
    height: pxPage(140),
    position: 'absolute',
    right: pxPage(35),
    top: pxPage(15),
    borderRadius: '10px',
    objectFit: 'cover'
}
const addspimgtwo = {
    width: pxPage(140),
    height: pxPage(140),
    position: 'absolute',
    right: pxPage(35),
    top: pxPage(345),
    borderRadius: '10px',
    objectFit: 'cover'
}
const addspinputsix = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(485),
}
const addspinputsen = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(525),
}
// 左侧文本
const addspdivone = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(70),
    fontSize: pxPage(15)
}
const addspdivtwo = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(155),
    fontSize: pxPage(15)
}
const addspdivthree = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(195),
    fontSize: pxPage(15)
}
const addspdivfour = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(235),
    fontSize: pxPage(15)
}
const addspdivfive = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(275),
    fontSize: pxPage(15)
}
const addspdivsix = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(315),
    fontSize: pxPage(15)
}
const addspdivsen = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(410),
    fontSize: pxPage(15)
}

const addspdiveit = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(495),
    fontSize: pxPage(15)
}
const addspdivnine = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(535),
    fontSize: pxPage(15)
}

const modifylogin={
    position: 'absolute',
    bottom:pxPage(10),
    left:pxPage(30)
}
export class Modify_business extends Component {
    constructor(props) {
        super(props);
        let modify = getMsg(this.props)
        console.log(modify)
        const data = [{
            url: `http://www.h5weixin.club:1025/api/image/${modify.business_pic}`,
        }];
        const wxpay = [{
           url: `http://www.h5weixin.club:1025/api/image/${modify.business_qrcode}`,
        }];
        let times = modify.business_time.split('-')
        this.state = {
            Files: data,
            Files1:wxpay,
            multiple: false,
            business_id: modify.business_id,//商家id

            business_name: modify.business_name,//商品名字
            business_phone: '',//商品描述
            business_email: '',//商品价格
            business_strtime: times[0],//营业时间'06:00'
            business_endtime: times[1],
            business_describe: modify.business_describe,//地址
            business_password: '',
            business_password_en: '',
        }
        this.onChange = this.onChange.bind(this)
        this.onChange2 = this.onChange2.bind(this)
        this.handleChangename = this.handleChangename.bind(this)
        this.handleChangphone = this.handleChangphone.bind(this)
        this.handleChangemail = this.handleChangemail.bind(this)
        this.handleChangstrtime = this.handleChangstrtime.bind(this)
        this.handleChangendtime = this.handleChangendtime.bind(this)
        this.handleChangdescribe = this.handleChangdescribe.bind(this)
        this.handleChangepassword = this.handleChangepassword.bind(this)
        this.handleChangepassworden = this.handleChangepassworden.bind(this)
    }

    onChange = (Files, type, index) => {
        this.setState({ Files, });
    }
    onChange2 = (Files1, type, index) => {
        this.setState({ Files1, });
    }
    handleChangename = (e) => {//商品名字
        this.setState({ business_name: e.target.value })
    }
    handleChangphone = (e) => {//商品描述
        this.setState({ business_phone: e.target.value })
    }
    handleChangemail = (e) => {//价格
        this.setState({ business_email: e.target.value })
    }
    handleChangstrtime = (e) => {//时间
        this.setState({ business_strtime: e.target.value })
    }
    handleChangendtime = (e) => {//时间
        this.setState({ business_endtime: e.target.value })
    }
    handleChangdescribe = (e) => {//地址
        this.setState({ business_describe: e.target.value })
    }
    handleChangepassword = (e) => {
        this.setState({ business_password: e.target.value })
    }
    handleChangepassworden = (e) => {
        this.setState({ business_password_en: e.target.value })
    }
    render() {
        const { Files,Files1 } = this.state;
        let modify = getMsg(this.props)
        return (
            <div className='addsp' style={{height:'100vh', backgroundColor: 'black', position: 'relative', color: 'black' }}>
                {/* <Mytab /> */}
                <div style={addspdiv}>
                    <div className='addsp-div-div' style={addspdivdiv}>
                        <div style={addspdivone}>修改头像</div>
                        <div style={addspdivtwo}>修改名字</div>
                        <div style={addspdivthree}>修改电话</div>
                        <div style={addspdivfour}>修改邮箱</div>
                        <div style={addspdivfive}>修改营业时间</div>
                        <div style={addspdivsix}>修改描述</div>
                        <div style={addspdivsen}>修改支付账号</div>
                        <div style={addspdiveit}>修改密码</div>
                        <div style={addspdivnine}>确认密码</div>
                        <ImagePicker
                            files={Files}
                            style={addspimg}
                            onChange={this.onChange}
                            selectable={Files.length < 1}
                            multiple={this.state.multiple}
                            length='1'
                        />
                        <input
                            className='addsp-form-input-one'
                            style={addspinputone}
                            placeholder='输入name'
                            type='text'
                            value={this.state.business_name}
                            onChange={this.handleChangename}
                        ></input>
                        <input
                            className='addsp-form-input-two'
                            style={addspinputtwo}
                            placeholder={modify.business_phone}
                            type='tel'
                            value={this.state.business_phone || ''}
                            onChange={this.handleChangphone}
                        ></input>
                        <input
                            className='addsp-form-input-three'
                            style={addspinputthree}
                            placeholder={modify.business_email}
                            type='email'
                            value={this.state.business_email}
                            onChange={this.handleChangemail}
                        ></input>
                        <input
                            className='addsp-form-input-four'
                            style={addspinputfour}
                            placeholder='输入开始时间'
                            type='time'
                            value={this.state.business_strtime}
                            onChange={this.handleChangstrtime}
                        ></input>
                        <input
                            className='addsp-form-input-four-half'
                            style={addspinputfourhalf}
                            placeholder='输入结束时间'
                            type='time'
                            value={this.state.business_endtime}
                            onChange={this.handleChangendtime}
                        ></input>
                        <input
                            className='addsp-form-input-five'
                            style={addspinputfive}
                            placeholder='输入描述'
                            type='text'
                            value={this.state.business_describe || ''}
                            onChange={this.handleChangdescribe}
                        ></input>
                        <ImagePicker
                            files={Files1}
                            style={addspimgtwo}
                            onChange={this.onChange2}
                            selectable={Files1.length < 1}
                            multiple={this.state.multiple}
                            length='1'
                        />
                        <input
                            className='addsp-form-input-six'
                            style={addspinputsix}
                            placeholder='输入密码'
                            type='number'
                            value={this.state.business_password}
                            onChange={this.handleChangepassword}
                        ></input>
                        <input
                            className='addsp-form-input-sen'
                            style={addspinputsen}
                            placeholder='确认密码'
                            type='password'
                            value={this.state.business_password_en || ''}
                            onChange={this.handleChangepassworden}
                        ></input>
                    </div>
                    <div className='addsp-div-div-two' style={addspdivdivtwo}>
                        <div
                            style={addspdivdivtwoi}
                            onClick={() => {
                                if ( (this.state.business_phone != '' || this.state.business_email != ''|| this.state.business_password != '')&&this.state.business_password_en =='') {
                                    errToast('修改电话、邮箱、密码需要输入原密码进行确认')
                                } else {
                                    console.log(this.state)
                                    this.props.dispatch(
                                        modifybus(getMsg(this.props).business_id,
                                            this.state.business_name,
                                            this.state.business_phone,
                                            this.state.business_email,
                                            `${this.state.business_strtime}-${this.state.business_endtime}`,
                                            this.state.business_describe,
                                            this.state.business_password,
                                            this.state.business_password_en,
                                            this.state.Files,
                                            this.state.Files1,
                                            this.props
                                        ))
                                    // this.props.history.push('/bushome/examine')
                                }
                            }}
                        >
                            <i style={{ fontSize: pxPage(44) }} className='iconfont icon-duigou'></i>
                        </div>
                        <div
                            style={addspdivdivtwoii}
                            onClick={() => {
                                this.props.history.goBack()

                            }}
                        >
                            <i style={{ fontSize: pxPage(44) }} className='iconfont icon-cancel'></i>
                        </div>
                    </div>
                </div>
                <div style={modifylogin}
                    onClick={()=>{
                        this.props.dispatch(qutebus(modify.business_id))
                        this.props.history.push('/first')
                    }}
                >退出登录</div>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login,
    // shop: state.shop,
    // business: state.business,
    // shop_temp: state.shop_temp,
})
export default withRouter(connect(mapStateToProps)(Modify_business))